<script setup lang="ts">
import IconSvg from "@/components/IconSvg/index.vue";
import { ITableData } from "./data";
import { queryList } from "./service";
import { IResponseData } from "@/@types/utils.request";
import { SearchParams } from "./data";
import searchBox from "./components/searchBox.vue";
import { reactive, ref, onMounted } from "vue";
import { uniformPageSize } from "@/config/settings";
import { formatDate } from "@/utils/formatDate";

const table = reactive<ITableData>({
	loading: false,
	list: [],
	pagination: {
		total: 0,
		pageNum: 1,
		pageSize: 10,
	},
});
// 搜索
const searchData = ref<SearchParams>({ userPhone: "", phone: "" });

// 列表数据
const getList = async (pageNum: number, pageSize?: number): Promise<void> => {
	table.loading = true;

	try {
		const response: IResponseData<any> = await queryList({
			pageSize: pageSize || table.pagination.pageSize,
			pageNum: pageNum,
			...searchData.value,
		});
		const { data } = response;
		console.log(data);
		table.list = data.records || [];
		table.pagination = {
			...table.pagination,
			total: data.total || 0,
			pageNum,
		};
	} catch (error: any) {
		console.log(error);
	}
	table.loading = false;
};

// 搜索
const onSearch = (val: any) => {
	searchData.value = val;
	getList(1);
};

const handleSizeChange = () => {
	getList(table.pagination.pageNum, table.pagination.pageSize);
};

const handleCurrentChange = (val: number) => {
	getList(val);
};
onMounted(() => {
	getList(1);
});
const route = useRoute();
</script>

<template>
	<searchBox v-model="searchData" @search="onSearch" />
	<el-card shadow="never">
		<template #header>
			<el-row justify="space-between">
				<el-col :span="8" style="font-size: 18px"> <IconSvg name="modular" />&nbsp;{{ route.meta.title }}</el-col>
				<el-col :span="8" style="text-align: end"> </el-col>
			</el-row>
		</template>

		<div style="width: 99.9%">
			<el-table row-key="id" :data="table.list" v-loading="table.loading" stripe border>
				<el-table-column
					type="index"
					label="序号"
					:index="
						(index: number) => {
							return (table.pagination.pageNum - 1) * table.pagination.pageSize + index + 1;
						}
					"
					sex
					width="55"
				>
				</el-table-column>

				<el-table-column label="用户头像" prop="headimgurl">
					<template #default="{ row }">
						<el-image :src="row.headimgurl" style="width: 80px; height: 80px" fit="cover" />
					</template>
				</el-table-column>
				<el-table-column label="所属手机号" prop="userPhone"> </el-table-column>
				<el-table-column label="预留电话" prop="phoneNum"> </el-table-column>
				<el-table-column label="反馈类型" prop="feedbackType"> </el-table-column>
				<el-table-column label="反馈内容" prop="feedbackDescribe"> </el-table-column>
				<el-table-column label="创新时间" prop="createTime">
					<template #default="{ row }">
						{{ formatDate(row.createTime) }}
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="padding-t10 display-flex-end">
			<el-pagination
				background
				layout="total,sizes, prev, pager, next"
				v-model:current-page="table.pagination.pageNum"
				v-model:page-size="table.pagination.pageSize"
				:page-sizes="uniformPageSize"
				:total="table.pagination.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</div>
	</el-card>
</template>
